<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="head-box flex-row-center" :style="{paddingTop: +statusBarHeight+'px'}">
		<image src="@/static/login/login_bg.png" class="head-bg" mode="widthFix"></image>
		<view class="head-item" @click="back">
			<up-icon name="arrow-left" color="#CDDBDC" size="42rpx"></up-icon>
		</view>
		<view class="head-title flex-center">
			<text class="title">{{pageTitle}}</text>
		</view>
		<view class="head-item"></view>
	</view>
	<!-- 输入密码 -->
	<retrieveFromVue :pageType="pageType"></retrieveFromVue>
</template>

<script setup>
	import retrieveFromVue from '../../components/login/retrieveFrom.vue';
	const statusBarHeight = ref(0);
	const pageType = ref(null);
	const pageTitle = ref('找回密码');
	onLoad(async (option) => {
		if (option && option.type) {
			pageType.value = option.type;
			pageTitle.value = '修改密码';
		}
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
	})
	const back = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.head-box {
		width: 100%;
		position: relative;
		box-sizing: border-box;
		padding: 0 28rpx;
		justify-content: space-between;

		.head-bg {
			position: absolute;
			z-index: -1;
			top: 0;
			left: 0;
			width: 100%;
		}

	}

	.head-title {
		height: 76rpx;
		box-sizing: border-box;

		.title {
			font-weight: bold;
			font-size: 34rpx;
			color: #CDDBDC;
		}
	}

	.head-item {
		width: 120rpx;
	}
</style>